<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script type="text/javascript" src="{{asset('/js/home/echarts.min.js')}}" ></script>
    <title>健康报告</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{asset('/css/home/share.css')}}" />
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <div class='pie'>
        <div id="main" style="width: 200px;height:200px; margin: -200px auto;"></div>
    </div>
    <div class="beijing">{{date("Y年m月d日")}}的健康报告</div>
    <div class="jk_centent">
        <div class='analyse_title'>
            <div class='title'>我的身材</div>
        </div>
        <div class="jk_padding">
            <div class="jk_top">
                <div class="jk_title">
                    <img src="{{asset('/images/home/lv.png')}}" />
                    <span class="h">BMI</span></div>
                <div class="jk_num"><span>{{$request['bmi']}}</span>(@if($request['bmi_type'] == 1)偏瘦 @elseif($request['bmi_type'] == 2)健康 @elseif($request['bmi_type'] == 3)超重 @elseif($request['bmi_type'] == 4)肥胖 @else""@endif)</div>
                <div class="jk_text">根据您的年龄正常的指数在<span class="colortext3">{{$request['min_bmi']}} - {{$request['max_bmi']}}</span>之间</div>
            </div>
            <!--体质率-->
            <div class="jk_top" style="    margin-top: 20px;">
                <div class="jk_title">
                    <img src="{{asset('/images/home/h.png')}}" />
                    <span class="h">体脂率</span></div>
                <div class="jk_num"><span>{{$request['bf']}}%</span>(@if($request['bf_type'] == 1)瘦@elseif($request['bf_type'] == 2)偏瘦@elseif($request['bf_type'] == 3)标准@elseif($request['bf_type'] == 4)微胖@elseif($request['bf_type'] == 5)肥胖@else""@endif)</div>
                <div class="jk_text">根据您的年龄正常的指数在<span class="colortext2">{{$request['min_bf']}}% - {{$request['max_bf']}}%</span>之间</div>
            </div>
        </div>
        <div class="jk_biaozhun">
            <img src="{{asset('/images/home/xiao.png')}}" />
            <p class="jk_biaoz">综合BMI和体脂率，你的身材属于<span>@if($request['body_type'] ==1 )偏瘦型@elseif($request['body_type'] == 2)标准型@elseif($request['body_type'] == 3)肥胖型@else""@endif</span></p>
        </div>
        <div class="jk_qujian">健康体重范围
            <div class="kg" >{{$request['min_weight']}} ~ {{$request['max_weight']}} <span class="kcal">kg</span></div>
        </div>
    </div>
    <!--我的饮食-->
    <div class="yinshi_centent">
        <div class='analyse_title'>
            <div class='title duan'>我的饮食</div>
        </div>
        <div class="jk_padding">
            <div class="jk_top">
                <div class="jk_title">
                    <img src="{{asset('/images/home/huang.png')}}" />
                    <span class="h">预算热量</span></div>
                <div class="jk_num"><span class="qian">{{$request['caloric']}} </span>kcal</div>
            </div>
        </div>
        <div class="jk_biao">
            <img src="{{asset('/images/home/hxiao.png')}}" />
            <p class="jk_biaoz">预算热量是根据你的身体情况，每天应该摄入的热量</p>
            <div class="j_qujian">热量摄入预设范围
                <div class="kg" ><span>{{$request['min_caloric']}} ~ {{$request['max_caloric']}} </span><span class="kcal">kcal</span></div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="btns" id="creat"data-toggle="modal" data-target="#myModal" >分享</div>
    </footer>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true"style="padding-right: 20px; padding-top: 10px;">×
            </button>
            <div class="title_title">长按图片分享给好友</div>
            <img id="down_img" src="{{asset('/images/home/X-loading2.gif')}}"/>
            <img id="down_button" src="#"  style="width: 100%; display: none"/>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script src="{{asset('/js/home/html2canvas.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/home/jquery-1.10.1.min.js')}}" ></script>
<script>
    //pie图


    echarts.init(document.getElementById('main')).setOption({

        series: {
            type: 'pie',
            color: ['#f7845c', '#f75c76', '#6cc49d'],
            labelLine:{
                normal:{
                    show:true
                }
            },
            label : {
                normal : {
                    textStyle : {
                        fontWeight : 'normal',
                        fontSize : 12
                    }
                }
            },
            data: [
                {name: '', value:10},
                {name: '', value:20},
                {name: '', value:70}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }

            }

        }

    });
    $("#creat").click(function(){
        $(".footer").hide();
        html2canvas(document.body).then(function(canvas) {
            dataURL =canvas.toDataURL("image/png");
            $("#down_img").css("display","none");
            $("#down_button").css("display","block");
            $('#down_button').attr( 'src' ,  dataURL ) ;
        });
    })
    $(".close").click(function(){
        $(".footer").show();
    })
    $("#myModal").click(function(){
        $(".footer").show();
    })


</script>
</body>
</html>
